<!--
 * @Author: zhangjingyu
 * @Date: 2021-03-22 10:38:32
 * @LastEditors: zhangjingyu
 * @LastEditTime: 2021-04-08 16:29:23
 * @FilePath: \vprisk10.14\src\components\ftp\autoForm.vue
 * @Description: 动态类型表单控件
-->
<template>
  <div>
    <!-- 字符和数值情况 -->
    <el-input
    :disabled="disabled"
      v-model="formvalue"
      placeholder="请输入..."
      v-if="elementType == '1' || elementType == '2'"
    ></el-input>
    <!-- 日期情况 -->
    <el-date-picker
      v-else-if="elementType == '3'"
      v-model="formvalue"
      :clearable="false"
      :type="daterange?'daterange':'date'"
    :disabled="disabled"
      value-format="yyyy-MM-dd"
      placeholder="请选择日期"
      style="width:100%"
    ></el-date-picker>
    <!-- 字典情况 -->
    <el-select
      v-else-if="elementType == '4'"
      v-model="formvalue"
    :disabled="disabled"
      clearable
      :multiple="multiple"
      style="width:100%"
    >
      <el-option
        v-for="item in dictList"
        :key="item.value"
        :value="item.value"
        :label="item.label"
      ></el-option>
    </el-select>
    <!-- 维度情况 -->
    <el-cascader
      v-else-if="elementType == '6'"
    :disabled="disabled"
      clearable
      filterable
      :options="dimTree"
      v-model="formvalue"
      placeholder="请选择"
      :props="propty"
      :show-all-levels="false"
      style="width: 100%"
      ref="dimTree"
      @change="checkDim"
    ></el-cascader>
    <!-- 币种情况 -->
    <el-cascader
    :disabled="disabled"
      v-else-if="elementType!='C'&&(dimCode == 'cpm_dim_currency'||dimCode=='CPM_DIM_CURRENCY')"
      clearable
      filterable
      :options="currencyList"
      v-model="formvalue"
      placeholder="请选择"
      :props="proptyCcy"
      style="width: 100%"
      ref="ccyTree"
      @change="checkCcy"
    ></el-cascader>
     <!-- 口径情况 -->
    <el-select
      v-if="elementType == 'C'||elementType == '7'"
      v-model="formvalue"
    :disabled="disabled"
      clearable
      :multiple="multiple"
      style="width:100%"
    >
      <el-option
        v-for="item in caliberList"
        :key="item.caliberCode"
        :value="item.caliberCode"
        :label="item.caliberName"
      ></el-option>
    </el-select>
  </div>
</template>

<script>
import { getDict } from "@/api/getDict";
import {  publicManage_pub,pricingTask } from "@/api/index";
export default {
  name: "auto-form",
  model: {
    prop: "value", // 要存在于props
    event: "change" // 当组件的值发生改变时要emit的事件名
  },
  props: {
    value: [String,Array],
    // 元素类型1字符，2数值，3日期，4字典，5期限，6维度，7口径
    elementType: String,
    elementField:String,
    dimCode: String,
    disabled:{
      type:Boolean,
      default:false
    },
    multiple:{
      type:Boolean,
      default:false
    },
    daterange:{
      type:Boolean,
      default:false
    },
  },
  data() {
    return {
      // 绑定值
      formvalue: this.value,
      // 字典数据
      dictList: [],
      // 维度树
      dimTree: [],
      // 币种
      currencyList:[],
      // 口径下拉
      caliberList:[],
      // 维度树配置
      propty: {
        checkStrictly: true,
        emitPath: false,
        multiple:this.multiple,
        value: "dictItemCode",
        label: "dictItemName"
      },
      // 币种树配置
      proptyCcy:{
        checkStrictly: true,
        emitPath: false,
        multiple:this.multiple,
        value: "currencyCode",
        label: "currencyName"
      },
      // 维度类型映射
      dimObj:{
        cpm_dim_organ:'OrganUnit',
        cpm_dim_subject:'GeneralLedger',
        cpm_dim_product:'Product',
        cpm_dim_industry:'Industry',
        CPM_DIM_ORGAN:'OrganUnit',
        CPM_DIM_SUBJECT:'GeneralLedger',
        CPM_DIM_PRODUCT:'Product',
        CPM_DIM_INDUSTRY:'Industry',
      },
    };
  },
  computed: {
    updateCondition() {
      let { elementType, dimCode } = this;
      return { elementType, dimCode };
    }
  },
  mounted(){
    this.updateStatus()
  },
  watch: {
    // 监听改变状态的条件
    updateCondition: {
      handler(newV, oldV) {
        this.updateStatus();
      },
      deep: true,
      immediate: true
    },
    // 监听值，实现双向绑定
    formvalue(newV, oldV) {
      this.$emit("change", this.formvalue);
      // this.$nextTick(() => {
       
      //     console.log(
      //         "更新后:" + newV,
      //         "更新前:" + oldV,
      //         "双向绑定完成"
      //       )
      // });
    },
    value(newV,oldV){
      this.formvalue = newV;
    }
  },
  methods: {
      // 更新数据状态
   async updateStatus() {
        let flg = this.elementType,dimCode = this.dimCode;
        if(!flg)return;
        if(!dimCode){
            this.dictList=[],this.dimTree = [],this.caliberList=[]
        }
        // 字典数据更新
        if(flg=='4'){
             getDict(dimCode).then(res => {
                if (res.code == 200) {
                 this.dictList = res.datas;
             }
                })
        }
        // 维度数据更新
        if(flg=='6'){
           let params = {
        dictCode:this.dimObj[dimCode]||this.elementField
      }
     await publicManage_pub.dimTreenodeQueryTreeNodeTree(params).then((res)=>{
        if(res.code == 200){
          this.dimTree = this.$listToTree("dictItemCode", "parentItemCode", res.data);
       console.log("更新维度数据", this.dimTree);

        } else{
          this.$message.error(res.message)
        }
      })
        }
        // 币种数据更新
        if((dimCode=='cpm_dim_currency'||dimCode=='CPM_DIM_CURRENCY')&&flg!='C'&&flg!='7'){
            await publicManage_pub
        .currencyManageQueryAvailable({ page: 1, size: 999 })
        .then(res => {
          this.currencyList = res.data;
       console.log("更新币种数据", this.currencyList);
        });
        }
        // 口径类数据更新
        if(flg==='C'||flg==='7'){
          let data = {
            elementField:this.elementField
          }
          if(!data.elementField)return ; 
             pricingTask
        .findDataByElementField(data)
        .then(res => {
          this.caliberList = res.caliberDatas;
        });
        }
    },
    checkDim() {
      if(this.multiple)return;
      this.$refs.dimTree.dropDownVisible = false;
    },
    checkCcy() {
      if(this.multiple)return;
      this.$refs.ccyTree.dropDownVisible = false;
    },
    
  }
};
</script>

<style lang="scss" scoped>
</style>